<template>
    <div class="orderdesc-wrapper">
    <v-header title="订单详情" ref="header"></v-header>
    <scroll ref="scroll" style="overflow: hidden;height: 100%"
        :style="{height: scrollHeight + 'px'}">
      <div>
         <!-- 顶部div包括 -->
        <div class="orderDescTop" :style="{backgroundImage:`url(${imgUrl})`}">
            <div class="orderDescTopLeft">
                <p>
                    <i class="fa fa-clock-o" aria-hidden="true" style="color: red"></i> {{orderInfo.orderStatusDesc}}
                </p>
            </div>
            <div class="orderDescTopRight" v-if="orderInfo.orderStatus === 0">
                    <p>需付款： ¥{{orderInfo.totalAmount}}</p>
            </div>
        </div>
        <!-- 收获地址只是针对特产 -->
        <div class="specialtyWrapper" v-if="orderInfo.orderGoodsList && orderInfo.orderGoodsList.length > 0 && orderInfo.orderGoodsList[0].goodsType === 201">
            <div>
                <i class="fa fa-map-marker" aria-hidden="true"></i> {{orderInfo.concat}}&nbsp;&nbsp;&nbsp;{{orderInfo.phone}}
            </div>
            <div class="addressManage">
                <p>
                    地址： {{orderInfo.receiptAddress}}
                </p>
            </div>
        </div>
        <!-- 展示商品信息 -->
        <div class="attention" v-for="(item, index) in orderInfo.orderGoodsList" v-if="index < 1" :key="item.index" @click="handleGoDesc(item.goodsId, item.goodsType)">
            <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item>
                    <div class="flex-demo-oa">
                        <span>|</span>&nbsp;商品信息
                    </div>
                    </flexbox-item>
            </flexbox>
            <hr class="orderhrtwo">
            <div class="shoppingWrapper" v-for="item in orderInfo.orderGoodsList" :key="item.index">
                <div class="shoppingDetail">
                    <div class="shoppingImage">
                        <img :src="item.goodsImage" alt="">
                    </div>
                    <div class="shoopingDesc">
                        <div>
                            <p class="shoppingTitle">{{item.goodsName}}</p>
                            <p class="shoppingDescContent">{{item.goodsIntro}}</p>
                            <div class="shoppingNumandMoney">
                                <p class="shopppingNum">数量： {{item.goodsNum}}</p>
                                <p class="shoppingMoney">¥{{item.goodsPrice}}</p>
                            </div>
                        </div>
                    </div>
                </div>
             </div>
        </div>

        <!-- 入园须知 -->
        <div class="attention" v-if="orderInfo.orderGoodsList && orderInfo.orderGoodsList.length && (orderInfo.orderGoodsList[0].goodsType === 101 || orderInfo.orderGoodsList[0].goodsType === 102)">
            <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item>
                    <div class="flex-demo-oa">
                        <span>|</span>&nbsp;注意事项
                    </div>
                    </flexbox-item>
            </flexbox>
            <hr class="orderhrtwo">
           <div @click="handleGoDesc(orderInfo.orderGoodsList[0].goodsId, orderInfo.orderGoodsList[0].goodsType)">
               <cell-box is-link>
                 <flexbox :gutter="0">
                    <flexbox-item :span="6/7">
                        <div>
                            <span>{{orderInfo.orderGoodsList[0].goodsName}}</span>
                        </div>
                    </flexbox-item>
                </flexbox>
                </cell-box>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item>
                    <div class="flex-demo-oaa">
                        <ul>
                            <li v-for="item in orderInfo.notice" :key="item.id" class="noticeText">{{item}}</li>
                        </ul>
                    </div>
                    </flexbox-item>
            </flexbox>
           </div>
        </div>

        <!-- 发票信息 -->
        <div class="attention" v-if="orderInfo.invoice === 1">
            <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item>
                    <div class="flex-demo-oa">
                        <span>|</span>&nbsp;发票信息
                    </div>
                    </flexbox-item>
            </flexbox>
            <hr class="orderhrtwo">
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>发票类型</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{invoiceMessage.invoiceType === 0 ? '普通发票' : '电子发票'}}</span>
                    </div>
                  </flexbox-item>
            </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>发票抬头</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{invoiceMessage.invoiceRiseType === 0 ? '个人' : '单位'}}</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>公司名称</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{invoiceMessage.companyName}}</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>税号</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{invoiceMessage.registrationNumber}}</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>收票人手机号</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{invoiceMessage.accountPhone ? invoiceMessage.accountPhone : '无'}}</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>收票人邮箱</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{invoiceMessage.accountEmail ? invoiceMessage.accountEmail : '无'}}</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>发票内容</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{invoiceMessage.invoiceContentType === 0 ? '商品明细' : '商品类别'}}</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
        </div>

        <!-- 游客信息 -->
        <div class="attention">
            <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item>
                    <div class="flex-demo-oa">
                        <span>|</span>&nbsp;游客信息
                    </div>
                    </flexbox-item>
            </flexbox>
            <hr class="orderhrtwo">
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>手机号</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{orderInfo.phone}}</span>
                    </div>
                  </flexbox-item>
            </flexbox>
           </div>
           <hr class="orderhrthree">
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>昵称</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{orderInfo.nickname}}</span>
                    </div>
                  </flexbox-item>
                </flexbox>

                <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>联系人</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{orderInfo.concat}}</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
        </div>

        <!-- 订单信息 -->
        <div class="attention">
            <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item>
                    <div class="flex-demo-oa">
                        <span>|</span>&nbsp;订单信息
                    </div>
                    </flexbox-item>
            </flexbox>
            <hr class="orderhrtwo">
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>订单号</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{orderInfo.outTradeNo}}</span>
                    </div>
                  </flexbox-item>
            </flexbox>
           </div>
           <div v-if="orderInfo.orderGoodsList && orderInfo.orderGoodsList.length > 0 && orderInfo.orderGoodsList[0].effectiveDate !== undefined">
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>出行时间</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{orderInfo.orderGoodsList[0].effectiveDate}}</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>下单时间</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>{{orderInfo.createAt}}</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
        </div>


        <!-- 商品信息 -->
        <div class="attention">
            <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item>
                    <div class="flex-demo-oa">
                        <span>|</span>&nbsp;支付信息
                    </div>
                    </flexbox-item>
            </flexbox>
            <hr class="orderhrtwo">
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>商品总额</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>¥{{orderInfo.totalAmount}}</span>
                    </div>
                  </flexbox-item>
            </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>运费</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>¥0.00</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>支付方式</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>在线支付</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>配送方式</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>快递运输</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
           <div>
               <flexbox :gutter="0" class="orderflexbox">
                  <flexbox-item :span="1/3">
                    <div class="flex-demo-oaa">
                        <span>配送时间</span>
                    </div>
                  </flexbox-item>
                   <flexbox-item :span="2/3">
                    <div class="flex-demo-oaa flexText">
                        <span>工作日、双休日与节假日均可送货</span>
                    </div>
                  </flexbox-item>
                </flexbox>
           </div>
           <hr class="orderhrtwo">
           <div class="payWrapper">
               <p v-if="orderInfo.orderStatus === 4">
                   需退款： <span>¥{{orderInfo.totalAmount}}</span>
               </p>
               <p v-if="orderInfo.orderStatus === 5">
                   已退款： <span>¥{{orderInfo.totalAmount}}</span>
               </p>
           </div>
        </div>
        <div style="height: 20px" v-if="orderInfo.orderStatus === 4 || orderInfo.orderStatus === 5">

        </div>
         <div style="height: 70px" v-if="orderInfo.orderStatus === 6">

        </div>
      </div>
     </scroll>

      <actionsheet v-model="showPhone" :menus="menusPhone" @on-click-menu="handleClickMenu" show-cancel></actionsheet>

       <div class="bottomDiv" v-if="orderInfo.orderStatus === 6">
            <button class="btnleft" v-if="orderInfo.orderStatus === 5 || orderInfo.orderStatus === 5" @click="handleDeleteOrder(orderInfo.id)">删除订单</button>
            <button class="btnright" @click="handleConnectPhone" v-if="orderInfo.orderStatus === 6">拨打客服</button>
      </div>
    </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import { Group, Cell, CellBox, Flexbox, FlexboxItem, Card, Flow, FlowState, FlowLine, Scroller, XButton, Actionsheet, Divider, Confirm } from 'vux'
import axios from '@/api/axiosApi'
import Scroll from '@/components/scroll/scroll'
import { handleBackMixin } from '@/assets/js/mixin'
import nativeBridge from '@/assets/js/nativeBridge'
export default {
  mixins: [handleBackMixin],
  data () {
    return {
      scrollHeight: '500',
      imgUrl: 'http://qiniucdn.iwiteks.com/orderback.png',
      orderInfo: {},
      invoiceMessage: {},
      menusPhone: {
        menu1: '拨打客服一线 10086',
        menu2: '拨打客服二线 18888888888'
      },
      showPhone: false,
      allPopupModels: []
    }
  },
  created () {
    this.getOrderDesc()
    this.getInvoiceDesc()
  },
  methods: {
    // 获取订单详情
    getOrderDesc () {
      axios.get(this, '/v1/order/' + this.$route.params.outTradeId, null, (data) => {
        switch (data.orderStatus) {
          case 0:
            data.orderStatusDesc = '等待付款'
            break
          case 1:
            data.orderStatusDesc = '等待收货'
            break
          case 2:
            data.orderStatusDesc = '已取消'
            break
          case 3:
            data.orderStatusDesc = '已完成'
            break
          case 4:
            data.orderStatusDesc = '退款中'
            break
          case 5:
            data.orderStatusDesc = '已退款'
            break
          case 6:
            data.orderStatusDesc = '退款失败'
            break
        }
        if (typeof data.orderGoodsList[0].notice !== 'undefined') {
          data.notice = data.orderGoodsList[0].notice.replace(/；/g, ';').split(';')
        }
        this.orderInfo = data
      })
    },
    // 获取发票详情
    getInvoiceDesc () {
      axios.get(this, '/v1/invoice/' + this.$route.params.outTradeId, null, (data) => {
        this.invoiceMessage = data
      })
    },
    handleGoDesc (id, type) {
      if (type === 201) {
        this.$router.push('/specialLocalProductDetail/' + id)
      } else if (type === 101) {
        this.$router.push('/cart/product/' + id + '/1')
      } else if (type === 102) {
        this.$router.push('/cart/product/' + id + '/2')
      }
    },
    // 确认退款
    handleQuitMoney (outTradeNo) {
      const _self = this
      _self.$vux.confirm.show({
        title: '温馨提示',
        content: '退款审核期为三天，请耐心等待',
        onConfirm () {
          axios.post(_self, '/v1/refund/' + outTradeNo, null, (data) => {
            _self.$router.push('/user/orderQuitServer')
            _self.$store.commit('SET_QUITORDER_TAB', 0)
          })
        }
      })
    },
    // 拨打客服
    handleConnectPhone() {
      this.showPhone = true
    },
    handleClickMenu (value) {
      if (value === 'menu1') {
        window.location.href = 'tel://10086'
      } else if (value === 'menu2') {
        window.location.href = 'tel://18888888888'
      }
    },
    toPay () {
      nativeBridge.alipay(this.$route.params.outTradeId, ({arg, msg}) => {
        if (arg === 9000) {
          if (this.orderInfo.orderGoodsList[0].goodsType === 201) {
            this.$store.commit('SET_ORDER_TAB', 2)
          } else {
            this.$store.commit('SET_ORDER_TAB', 4)
          }
          this.$router.push('/user/order')
        }
        this.$vux.toast.text(msg, 'middle')
      })
    },
    toCansel () {
      axios.put(this, '/v1/order', {orderString: JSON.stringify({outTradeNo: this.$route.params.outTradeId, orderStatus: 2})}, (data) => {
        this.$vux.toast.text('订单取消成功', 'middle')
        this.$router.push('/user/order')
        this.$store.commit('SET_ORDER_TAB', 3)
      })
    },
    // 删除订单
    handleDeleteOrder (id) {
      const _self = this
      _self.$vux.confirm.show({
        title: '温馨提示',
        content: '你确定删除此订单吗',
        onConfirm () {
          axios.delete(_self, '/v1/order/' + id, null, (data) => {
            _self.$vux.toast.text('删除成功', 'middle')
          })
        }
      })
    }
  },
  components: {
    VHeader,
    Group,
    Cell,
    CellBox,
    Flexbox,
    FlexboxItem,
    Card,
    Flow,
    FlowState,
    FlowLine,
    Scroller,
    XButton,
    Actionsheet,
    Divider,
    Confirm,
    Scroll
  },
  mounted () {
    this.scrollHeight = window.innerHeight - 60
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
.orderdesc-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $color-background;
  z-index: 101;
  height: 100%;
}

.orderDescTop {
    padding-top 10px
    padding-left 15px
    padding-right 15px
    padding-bottom 10px
    display flex
    align-items center
    justify-content space-between
    width 100%
    height 60px
    .orderDescTopLeft {
        p {

        }
    }
    .orderDescTopRight {
        p {
            margin-right 30px
        }
    }
}

.specialtyWrapper {
    padding-top 10px
    padding-left 15px
    padding-right 15px
    padding-bottom 10px
    margin-top 10px
    background-color white
    .addressManage {
        padding-left 12px
        p {
            font-size $font-size-desc
            color $color-text-2
        }
    }
}

.shoppingWrapper {
    background-color white
    border-bottom-style solid
    border-width:1px
    border-color: #E4E4E4
    .shoppingTop {
        padding-top 10px
        padding-left 15px
        padding-right 15px
        padding-bottom 5px
        border-bottom-style solid
        border-width:1px
        border-color: #E4E4E4
    }
    .shoppingDetail {
        padding-top 10px
        padding-left 15px
        padding-right 15px
        padding-bottom 5px
        display flex
        .shoppingImage {
            img {
                width: 70px
                height 71px
                background-size: cover
                background-repeat: no-repeat
            }
        }
        .shoopingDesc {
            width calc(100% - 80px)
            padding-left 10px
            .shoppingTitle {
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }
            .shoppingDescContent {
                margin-top 2px
                font-size $font-size-desc
                color $color-text-2
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }
            .shoppingNumandMoney {
                margin-top 4px
                font-size $font-size-desc
                color $color-text-2
                display flex
                justify-content space-between
                .shoppingMoney {
                    margin-top 5px
                }
                .shopppingNum {

                }
            }
        }
    }
}

.orderStatus {
    padding:10px;15px;15px;30px;
    background-color:$color-theme-1;
}

.ordercell {
    background-color:white;
}

.flex-demo-o span {
    color:$color-theme;;
    margin-left:15px;
    font-size:$font-size-large
}

.flex-demo-oa span {
    color:$color-theme;
}

.flex-demo-oa {
    margin-left:10px;
    margin-top:3px;
    margin-bottom:3px;
}

.flex-demo-ot span {
    color:$color-text-2
    font-size:$font-size-small
}

.moneyOrderDesc {
    color:$color-theme;
}

.orderhr {
  height:1px;border:none;border-top:1px solid #E4E4E4;
}

.orderhrtwo {
  height:1px;border:none;border-top:1px solid #E4E4E4;
  margin-top:3px;
}

.orderhrthree {
  height:1px;border:none;border-top:1px dashed #E4E4E4;
  margin-top:3px;
}

.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: $font-size-small
}
.card-demo-flex span {
  color: #C5C5C5;
  line-height:15px;
}

.orderdesccard {
    margin-top:-2px;
}

.orderdesccards {
    z-index 20
    margin-top: -20px
}

.attention {
    background-color:white;
    margin-top:10px;
}

.flex-demo-oaa {
    color:black;
    margin-left:15px;
    margin-top:3px;
    margin-bottom:3px;
    margin-right:15px;
    font-size:$font-size-desc;
}

.bottomDiv {
    z-index 999
    position absolute
    bottom 0px
    width 100%
    height 35px
    padding-top 10px
    padding-left 15px
    padding-right 15px
    padding-bottom 5px
    text-align right
    background-color: $color-background
    .btnleft {
        margin-right 5px
        color: $color-text-2;
        width: 70px;
        height: 33px;
        border: solid 1px #E0E0E0;
        border-radius 3px
        background-color: #fff;
        &:focus {
          outline: none
        }
    }
    .btnright {
        margin-right 25px
        color: red;
        width: 70px;
        height: 33px;
        border: solid 1px red;
        border-radius 3px
        background-color: #fff;
        &:focus {
          outline: none
        }
    }
}


.goodsDesc span {
    font-size: $font-size-desc
    color: $color-text-2
}

.goodescWrapper {
    padding-left 15px
    padding-bottom 10px
    padding-right 15px
}

.moneyOrder {
    text-align right
    margin-left -20px
}

.noticeText {
    font-size: $font-size-desc;
    color: $color-text-2;
}

.vux-1px-r p {
    color: $color-theme;
}

.flexText span {
    color: $color-text-2;
}

.payWrapper {
    padding-top 10px
    padding-left 15px
    padding-right 15px
    padding-bottom 10px
    background-color white
    text-align right
    span {
        color red
    }
}
</style>
